<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box table {
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center;
            width: 500px;
        }
        #box table td {
            height: 40px;
        }
        #box thead td {
            background-color: lightgray;
        }
        #box td {
            border: 1px solid #000;
        }
        #box td a {
            text-decoration: none;
            color: #000;
        }
        #box td a:hover {
            color: #f10215;
        }
    </style>
</head>
<body>
    <div id="box">
    </div>

    <script src="../js/common.js"></script>
    <script>
        //表头数据
        var headData = ['姓名','年龄','学历','操作'];
        //表格数据
        var bodyData = [ 
            {
            name: '小爱',age: '10',education: '本科'
            },
            {
            name: '小美',age: '20',education: '本科'
            },
            {
            name: '小港',age: '21',education: '本科'
            },
            {
            name: '小林',age: '33',education: '研究生'
            }
        ];

        //1.生成表头
        var table = document.createElement('table');
        box.appendChild(table);
        
        var thead = document.createElement('thead');
        table.appendChild(thead);

        var tr = document.createElement('tr');
        thead.appendChild(tr);

        //遍历数组时创建td
        var td;
        headData.forEach(function(item) {
            td = document.createElement('td');
            tr.appendChild(td);
            setInnerText(td,item);
        });

        //2.生成表格
        var tbody = document.createElement('tbody');
        table.appendChild(tbody);

        //遍历数组生成数据行和列
        bodyData.forEach(function(item) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //for 循环实现创建td
            for(var key in item) {
                var td = document.createElement('td');
                tr.appendChild(td);
                setInnerText(td,item[key]);
            }
            
            var td = document.createElement('td');
            tr.appendChild(td);
            var link = document.createElement('a');
            td.appendChild(link);
            setInnerText(link,'删除');
            link.href = 'javascript: void(0)';


            //创建事件实现点击删除删除某一行
            link.onclick = linkClick;
        })

        function linkClick() {
            var isDelete = confirm("你确定删除吗？");
            if (isDelete) {
                var tr = this.parentNode.parentNode;
                tr.remove();
            }

        }
    </script>

</body>
</html>